<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="酒店名称" prop="hotelName">
      <el-input v-model="dataForm.hotelName" placeholder="酒店名称"></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
         <el-form-item label="酒店编码" prop="hotelCode">
          <el-input v-model="dataForm.hotelCode" placeholder="酒店编码"></el-input>
         </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="联系电话"></el-input>
          </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="酒店地址" prop="address">
      <el-input v-model="dataForm.address" placeholder="酒店地址"></el-input>
    </el-form-item>
    <el-form-item label="所在地区" prop="district">
      <el-popover
        ref="popDistrict"
        placement="bottom"
        trigger="click">
        <el-form :inline="true" >
          <el-form-item>
              <el-select v-model="province" clearable @change="proChange" placeholder="请选择省份">
                <el-option
                  v-for="item in provinces"
                  :key="item.cityCode"
                  :label="item.cityNameZh"
                  :value="item.cityCode"
                ></el-option>
              </el-select>
          </el-form-item>
            <el-form-item>
              <el-select v-model="city" clearable @change="cityChange" placeholder="请选择城市">
                <el-option
                  v-for="item in citys"
                  :key="item.cityCode"
                  :label="item.cityNameZh"
                  :value="item.cityCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="district" clearable @change="distChange" placeholder="请选择区域">
                <el-option
                  v-for="item in districts"
                  :key="item.cityCode"
                  :label="item.cityNameZh"
                  :value="item.cityCode"
                ></el-option>
              </el-select>
          </el-form-item>
        </el-form>
      </el-popover>
      <el-input v-popover:popDistrict v-model="distName" :readonly="true" placeholder="点击选择所属地区"></el-input>
    </el-form-item>
    <el-form-item label="坐标类型" prop="axes">
      <el-radio-group v-model="dataForm.axes">
        <el-radio label="G">Google</el-radio>
        <el-radio label="B">百度</el-radio>
        <el-radio label="A">高德</el-radio>
        <el-radio label="M">灵图</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="经度" prop="axesX">
          <el-input v-model="dataForm.axesX" placeholder="经度"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纬度" prop="axesY">
          <el-input v-model="dataForm.axesY" placeholder="纬度"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="人工校准" prop="manualVerify">
          <el-switch
            v-model="dataForm.manualVerify"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="自动下单" prop="automaticOrder">
          <el-switch
            v-model="dataForm.automaticOrder" 
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="状态" prop="isDel">
          <el-switch
            v-model="dataForm.isDel"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="营业状态" prop="status">
          <el-switch
            v-model="dataForm.status"
            :active-value = "0"
            :inactive-value = "1">
          </el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="星级" prop="starLevel">
      <el-radio-group v-model="dataForm.starLevel">
        <el-radio label="3">3星以下</el-radio>
        <el-radio label="4">4星</el-radio>
        <el-radio label="5">5星</el-radio>
        <el-radio label="6">5星以上</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="类型 ">
          <el-select v-model="dataForm.hotelType" placeholder="请选择酒店类型">
            <el-option
              v-for="item in hotelTypes"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="品牌 ">
          <el-select v-model="dataForm.brand" clearable placeholder="请选择品牌">
            <el-option v-for="item in brands" :key="item.id" :label="item.bname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
     </el-row>
         <el-row>
      <el-col :span="12">
        <el-form-item label="楼层信息" prop="floor">
          <el-input v-model="dataForm.floor" placeholder="楼层信息"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="起价" prop="sp">
          <el-input v-model="dataForm.sp" placeholder="起价单位：分"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="所在商圈" prop="area">
      <el-input v-model="dataForm.area" placeholder="酒店所在商圈名"></el-input>
    </el-form-item>
    <el-form-item label="描述信息" prop="hotelInfo">
      <el-input type="textarea" :rows="2" v-model="dataForm.hotelInfo" placeholder="酒店描述信息"></el-input>
    </el-form-item>
    <el-form-item label="酒店设施" prop="hotelFacilities">
      <el-input type="textarea" :rows="2" v-model="dataForm.hotelFacilities" placeholder="酒店设施"></el-input>
    </el-form-item>
    <el-form-item label="酒店服务" prop="service">
      <el-input type="textarea" :rows="2" v-model="dataForm.service" placeholder="酒店服务"></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="开业时间" prop="openTime">
          <el-date-picker
            v-model="dataForm.openTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="装修时间" prop="decorateTime">
        <el-date-picker
            v-model="dataForm.decorateTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="首图信息" prop="pictureurl">
      <el-input v-model="dataForm.pictureurl" placeholder="首图信息"></el-input>
    </el-form-item>
    <el-form-item label="数据来源" prop="dataFrom">
      <el-radio-group v-model="dataForm.dataFrom">
        <el-radio :label="1">携程</el-radio>
        <el-radio :label="2">美团</el-radio>
        <el-radio :label="3">官网</el-radio>
        <el-radio :label="4">其他</el-radio>
      </el-radio-group>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          hotelCode: '',
          hotelName: '',
          hotelNameEn: '',
          address: '',
          country: '',
          province: '',
          district: '',
          city: '',
          county: '',
          area: '',
          phone: '',
          hotelInfo: '',
          axes: '',
          axesX: '',
          axesY: '',
          starLevel: '',
          hotelType: '',
          hotelFacilities: '',
          service: '',
          sp: '',
          openTime: '',
          decorateTime: '',
          floor: '',
          chinaHotel: '',
          status: 1,
          pictureurl: '',
          brand: '',
          dataFrom: '',
          manualVerify: 0,
          automaticOrder: 0,
          isMatch: '',
          htgroup: '',
          isDel: 0
        },
        tier: 1,
        parentId: -1,
        province: null,
        provinces: [],
        city: null,
        citys: [],
        distName: '',
        district: null,
        districts: [],
        brands: [],
        hotelTypes: [],
        dataRule: {
          hotelCode: [
            { required: true, message: '酒店编码不能为空', trigger: 'blur' }
          ],
          hotelName: [
            { required: true, message: '酒店名称不能为空', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '酒店地址不能为空', trigger: 'blur' }
          ],
          district: [
            { required: true, message: '酒店所在地区不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' }
          ],
          axes: [
            { required: true, message: '坐标类型不能为空', trigger: 'blur' }
          ],
          axesX: [
            { required: true, message: '经度不能为空', trigger: 'blur' }
          ],
          axesY: [
            { required: true, message: '纬度不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 获取区域查询条件
      getQuryCitys() {
        this.$http({
          url: this.$http.adornUrl('/ht/hthotelinfo/citys'),
          method: 'post',
          params: this.$http.adornParams({
            tier: this.tier,
            parentId: this.parentId
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            switch (this.tier) {
              case 1:
                this.provinces = data.list
                break
              case 2:
                this.citys = data.list
                break
              case 3:
                this.districts = data.list
                break
            }
          }
        })
      },
      // 选择省份
      proChange(value) {
        this.parentId = value
        this.dataForm.district = value
        let selObj = {}
        selObj = this.provinces.find((item) => {
          return item.cityCode === value
        })
        if(selObj != null){
          this.distName = selObj.cityNameZh
        }else{
          this.dataForm.district = null
          this.distName = ''
        }
        this.tier = 2
        this.getQuryCitys()
      },
      // 选择城市
      cityChange(value) {
        this.parentId = value
        this.dataForm.district = value
        this.tier = 3
        let selObj = {}
        selObj = this.citys.find((item) => {
          return item.cityCode === value
        })
        if(selObj != null){
          this.distName = selObj.cityNameZh
        }else{
          this.dataForm.district = null
          this.distName = ''
        }
        this.getQuryCitys()
      },
      // 选择地区
      distChange(value) {
        this.dataForm.district = value
        let selObj = {}
        selObj = this.districts.find((item) => {
          return item.cityCode === value
        })
        if(selObj != null){
          this.distName = selObj.cityNameZh
        }else{
          this.dataForm.district = null
          this.distName = ''
        }
      },
      // 查询品牌
      getBrands() {
        this.$http({
          url: this.$http.adornUrl('/ht/hthotelinfo/brand'),
          method: 'get'
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.brands = data.list
          }
        })
      },
      // 查询品牌
      getHtTypes() {
        this.$http({
          url: this.$http.adornUrl('/ht/hthotelinfo/httype'),
          method: 'get'
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.hotelTypes = data.list
          }
        })
      },
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.getQuryCitys()
        this.getBrands()
        this.getHtTypes()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/ht/hthotelinfo/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.hotelCode = data.htHotelinfo.hotelCode
                this.dataForm.hotelName = data.htHotelinfo.hotelName
                this.dataForm.hotelNameEn = data.htHotelinfo.hotelNameEn
                this.dataForm.address = data.htHotelinfo.address
                this.dataForm.district = data.htHotelinfo.district
                this.distName = data.htHotelinfo.cityNameZh
                this.dataForm.area = data.htHotelinfo.area
                this.dataForm.phone = data.htHotelinfo.phone
                this.dataForm.hotelInfo = data.htHotelinfo.hotelInfo
                this.dataForm.axes = data.htHotelinfo.axes
                this.dataForm.axesX = data.htHotelinfo.axesX
                this.dataForm.axesY = data.htHotelinfo.axesY
                this.dataForm.starLevel = data.htHotelinfo.starLevel
                this.dataForm.hotelType = data.htHotelinfo.hotelType
                this.dataForm.hotelFacilities = data.htHotelinfo.hotelFacilities
                this.dataForm.service = data.htHotelinfo.service
                this.dataForm.sp = data.htHotelinfo.sp
                this.dataForm.openTime = data.htHotelinfo.openTime
                this.dataForm.decorateTime = data.htHotelinfo.decorateTime
                this.dataForm.floor = data.htHotelinfo.floor
                this.dataForm.chinaHotel = data.htHotelinfo.chinaHotel
                this.dataForm.status = data.htHotelinfo.status
                this.dataForm.pictureurl = data.htHotelinfo.pictureurl
                this.dataForm.brand = data.htHotelinfo.brand
                this.dataForm.dataFrom = data.htHotelinfo.dataFrom
                this.dataForm.manualVerify = data.htHotelinfo.manualVerify
                this.dataForm.automaticOrder = data.htHotelinfo.automaticOrder
                this.dataForm.isMatch = data.htHotelinfo.isMatch
                this.dataForm.htgroup = data.htHotelinfo.htgroup
                this.dataForm.isDel = data.htHotelinfo.isDel
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/ht/hthotelinfo/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'hotelCode': this.dataForm.hotelCode,
                'hotelName': this.dataForm.hotelName,
                'hotelNameEn': this.dataForm.hotelNameEn,
                'address': this.dataForm.address,
                'country': this.dataForm.country,
                'province': this.dataForm.province,
                'district': this.dataForm.district,
                'city': this.dataForm.city,
                'county': this.dataForm.county,
                'area': this.dataForm.area,
                'phone': this.dataForm.phone,
                'hotelInfo': this.dataForm.hotelInfo,
                'axes': this.dataForm.axes,
                'axesX': this.dataForm.axesX,
                'axesY': this.dataForm.axesY,
                'starLevel': this.dataForm.starLevel,
                'hotelType': this.dataForm.hotelType,
                'hotelFacilities': this.dataForm.hotelFacilities,
                'service': this.dataForm.service,
                'sp': this.dataForm.sp,
                'openTime': this.dataForm.openTime,
                'decorateTime': this.dataForm.decorateTime,
                'floor': this.dataForm.floor,
                'chinaHotel': this.dataForm.chinaHotel,
                'status': this.dataForm.status,
                'pictureurl': this.dataForm.pictureurl,
                'brand': this.dataForm.brand,
                'dataFrom': this.dataForm.dataFrom,
                'manualVerify': this.dataForm.manualVerify,
                'automaticOrder': this.dataForm.automaticOrder,
                'isMatch': this.dataForm.isMatch,
                'htgroup': this.dataForm.htgroup,
                'isDel': this.dataForm.isDel
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
